<template>
  <div class="home">
    <header></header>
    <div><span class="iconfont iconicon-test" @click="$router.push('/')"></span></div>
    <div class="box">
      <div class="icon"><span class="iconfont iconnew"></span></div>
      <div class="form">
        <form action="">
          <verifyinput inptype="text" inp="用户名 / 手机号码" :verify="/\d{3}/" msg="请输入合法用户名或手机号" 
          @verifyvalue="regname" /> <br>
          
          <verifyinput inptype="text" inp="昵称" :verify="/\d{3}/" msg="请输入合法的昵称" @verifyvalue="regna" /> <br>
          <verifyinput inptype="password" inp="密码" :verify="/\d{4,10}/" msg="请输入更安全的的密码" @verifyvalue="registpass" /> <br>

          <verifybtn verifyval="注册" @verifyclick="clicks" />

          <router-link to="/">已有账号?&nbsp;去登陆</router-link>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import verifyinput from '../components/module/verifyinput' //输入框组件
import verifybtn from '../components/module/verifybtn' //按钮组件
  export default {
    components:{
      verifyinput,
      verifybtn
    },
    data(){
      return{
        registname:'',
        regnas:'',
        regpass:''
      }
    },
    methods:{
      regname(val){
        this.registname = val
        //console.log(this.registname);
      },
      regna(val){
        this.regnas = val
        //console.log(this.regnas);
      },
      registpass(val){
        this.regpass = val
        //console.log(this.regpass);
      },
      clicks(){
        console.log('注册按钮被点击');
        console.log(this.registname,this.regnas,this.regpass);
        // if(!this.registname || !this.regnas || !this.regpass){
        //   this.$toast('请输入完整信息')
        //   return
        // }
        this.$axios({
          url:'/register',
          method:'post',
          data:{
            username:this.registname,
            nickname:this.regnas,
            password:this.regpass
          }
        }).then((res)=>{
          console.log(res);
          if(res.data.message == '注册成功'){
             this.$toast.success(res.data.message)
          }else{
            this.$toast.fail(res.data.message)
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .home{
    font-weight: 400;
    background: white;
    width: 100%;
    height: 100vh;
    header{
      height: 20/360*100vw;
      background-color: #757575;
      margin-bottom: 20/360*100vw;
    }
    .iconicon-test{
      font-size: 24/360*100vw;
      margin-left: 20/360*100vw;
      margin-top: 20/360*100vw;
    }
    .box{
      margin: 0 auto;
      .icon{
          color: red;
          text-align: center;
        span{
          font-size: 100/360*100vw;
        }
      }
      .form{
        text-align: center;
        button{
          width: 75%;
          height: 40/360*100vw;
          font-size: 25/360*100vw;
          margin-top: 40/360*100vw;
          border: none;
          background: #eb2202;
          border-radius: 20/360*100vw;
          margin-bottom: 20px;
          outline: none;
        }
        span{
          font-size: 10/360*100vw;
          color: #40b181;
        }
      }
    }
  }
</style>>
  

